<template>
    <!--  -->
    <el-dialog v-model="show" title="烫金版详情" width="700" center align-center @close="handleClose">
        <div class="textFlex">
            <div class="textFlex_title ">烫金版名称：</div>
            <div class="textFlex_content">{{ props.initList.gildingName || '' }}</div>
        </div>

        <div class="textFlex">
            <div class="textFlex_title">烫金版编号：</div>
            <div class="textFlex_content">{{ props.initList.gildingCode || '' }}</div>
        </div>

        <div class="textFlex">
            <div class="textFlex_title">烫金版图片：</div>
            <div class="textFlex_list" v-if="props.initList.fileList != null">
                <img v-for="(item, index) in props.initList.fileList" :key="index" :src="item.fileUrl" alt="">
            </div>
        </div>

        <div class="textFlex">
            <div class="textFlex_title">烫金版备注：</div>
            <div class="textFlex_content">{{ props.initList.remark || '' }}</div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose()">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['close']);
const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
}, { deep: true });

const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.textFlex {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    padding-left: 20px;

    &_title {
        width: 110px;
        font-weight: bold;
    }

    &_list {
        display: flex;

        img {
            width: 150px;
            height: 60px;
            margin-right: 10px;
        }
    }

    &_blue {
        color: #69AFF0;
    }

    &_green {
        color: #68C23D;
    }
}
</style>